<template>
<div>
    <el-card class="box-card">
         <el-button type="primary" @click="addCommercial(1)"  v-if="parArray.indexOf('addMerchant') != -1">新增商户号</el-button>
    <div class="table">
         <el-table
            :data="dataList"
            style="width: 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
            label="序号"
            type="index"
            width="55">
            </el-table-column>
              <el-table-column
            prop="name"
            label="商户号名称"
            min-width="120">
            </el-table-column>
              <el-table-column
            prop="simpleName"
            label="商户号简写"
            min-width="120">
            </el-table-column>
            <el-table-column
            prop="mchId"
            label="商户号"
            min-width="120">
            </el-table-column>
            <el-table-column
            prop="appid"
            label="appId"
            min-width="160">
            </el-table-column>
              <!-- <el-table-column
            prop="serial"
            label="商户证书序列号"
            width="180">
            </el-table-column>
              <el-table-column
            prop="privateKey"
            label="商户私钥"
            width="180">
            </el-table-column>
            <el-table-column
            prop="apiV3Key"
            label="ApiV3Key"
            width="180">
            </el-table-column> -->
            <el-table-column
            prop="receivedAmount"
            width="180">
            <template slot="header" slot-scope="scope">
              <!-- <div>{{scope.row.receivedAmount?scope.row.receivedAmount:'-'}}</div> -->
              <span>已收金额</span>
              <el-tooltip   content="只统计到昨天" placement="right">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
               <span >{{scope.row.receivedAmount?scope.row.receivedAmount:'-'}}</span>
            </template>
            </el-table-column>
            <el-table-column
            prop="status"
            label="启/停用">
            <template slot-scope="scope">
               <span  :class="scope.row.status==1?'active':'forbid'">{{scope.row.status==1?dictionaries.enable_status[0].dictName:dictionaries.enable_status[1].dictName}}</span>
            </template>
            </el-table-column>
              <el-table-column
            prop="updatedTime"
            label="最后更新时间"
            width="180">
            </el-table-column>
              <el-table-column
            label="操作"
            fixed="right"
            width="180">
             <template slot-scope="scope">
                <el-button @click="handleClick(scope.row,2)" type="text" size="small" v-if="parArray.indexOf('addMerchant') != -1">编辑</el-button>
                <template v-if="scope.row.status !== 1">
                <el-button @click="startUsing(scope.row)" type="text" size="small"  v-if="parArray.indexOf('addMerchant') != -1">{{scope.row.status==1?"禁用":"启用"}}</el-button>
                </template>
                <el-button @click="operationRecord(scope.row)" type="text" size="small" v-if="parArray.indexOf('addMerchant') != -1">操作记录</el-button>
            </template>
            </el-table-column>
        </el-table>
      </div>

    </el-card>
    <!-- 操作记录 -->
    <el-dialog
      title="操作记录"
      :visible.sync="operationRecordDialog"
      width="30%"
      append-to-body
      :before-close="handleOperationClose">
      <template>
    <el-table
      :data="recordDataList"
      style="width: 100%">
      <el-table-column
        prop="operationTypeLabel"
        label="操作功能"
        >
      </el-table-column>
      <el-table-column
        prop="operationContent"
        label="内容"
        >
        <template slot-scope="scope">
          <span v-html="scope.row.operationContent"></span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdBy"
        label="操作人">
      </el-table-column>
      <el-table-column
        prop="createdTime"
        label="操作时间">
      </el-table-column>
    </el-table>
  </template>
      <span slot="footer" class="dialog-footer">
        <el-pagination
                @size-change="handleRecordSizeChange"
                    @current-change="handleRecordCurrentChange"
                    :current-page="currentPageRecord"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSizeRecord"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="recordTotalNum"
                    prev-text="上一页"
                    next-text="下一页">
                </el-pagination>
      </span>
    </el-dialog>

    <el-dialog
        title="禁用"
        :append-to-body="true"
        :visible.sync="dialogVisibleForbidden"
        width="25%"
        :before-close="handleCloseForbidden">
        <div class="dialogText">
            <h3 style="font-zise:18;">是否确定禁用商户号</h3>
        <!-- <p style="color: #999999">是否确定禁用商户号，禁用后已绑定<span style="color:#F15043">品牌{{brandNum}}</span>和设置<span style="color:#F15043">收款时间{{timeNum}}</span>将<span style="color:#F15043">无法支付</span></p> -->
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCloseForbidden">取 消</el-button>
            <el-button type="primary" @click="forbiddenBtn">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="启用"
        :append-to-body="true"
        :visible.sync="dialogVisibleStartUsing"
        width="25%"
        :before-close="handlerStartUsing">
        <div class="dialogText">
            <h3 style="font-zise:18;">启用后将自动停用原商户号，是否启用</h3>
        <!-- <p style="color: #999999">是否确定禁用商户号，禁用后已绑定<span style="color:#F15043">品牌{{brandNum}}</span>和设置<span style="color:#F15043">收款时间{{timeNum}}</span>将<span style="color:#F15043">无法支付</span></p> -->
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleStartUsing=false">取 消</el-button>
            <el-button type="primary" @click="startUsingBtn">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        :title="addtitle"
        :append-to-body="true"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="商户号名称" prop="name">
                <el-input type="text" placeholder="请输入商户号名称" v-model="ruleForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="简写"  prop="simpleName">
                <el-input type="text" placeholder="请输入简写" v-model="ruleForm.simpleName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商户密钥"  prop="mchKey" >
                <el-input type="input" v-model="ruleForm.mchKey" placeholder="请输入商户密钥" ></el-input>
            </el-form-item>
            <el-form-item label="商户号"  prop="mchId" >
                <el-input v-model="ruleForm.mchId" placeholder="请输入商户号"></el-input>
            </el-form-item>
             <el-form-item label="AppID" prop="appid" >
                <el-input  v-model="ruleForm.appid" placeholder="请输入AppID"></el-input>
            </el-form-item>
              <el-form-item label="商户私钥"  prop="privateKey" >
                <el-input type="textarea" v-model="ruleForm.privateKey" placeholder="请输入商户私钥" ></el-input>
            </el-form-item>
             <el-form-item label="商户证书序列号"  prop="serial" >
                <el-input type="text" v-model="ruleForm.serial" placeholder="商户证书序列号" ></el-input>
            </el-form-item>
            <el-form-item label="商户证书"  prop="privateCert" >
                <el-input type="textarea" v-model="ruleForm.privateCert" placeholder="商户证书序列号" ></el-input>
            </el-form-item>
             <el-form-item label="ApiV3Key"   prop="apiV3Key">
                <el-input v-model="ruleForm.apiV3Key"  placeholder="请输入ApiV3Key"></el-input>
            </el-form-item>
             <el-form-item label="是否启用" prop="status">
                <el-switch
                    v-model="ruleForm.status"
                    :active-value="1"
                    :inactive-value="2"
                    >
                </el-switch>
            </el-form-item>
            <div class="btnBox">
                <el-button  @click="dialogVisible=false">取消</el-button>
                <el-button  type="primary" @click="submitForm('ruleForm')">确定</el-button>
            </div>

        </el-form>
    </el-dialog>
     <div class="page">
            <div class="block">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage1"
                               :page-sizes="[10, 20, 50, 100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="totalNum"
                               prev-text="上一页"
                               next-text="下一页">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      operationRecordDialog: false,
      addtitle: '',
      forbiddenId: '',
      dialogVisibleForbidden: false,
      dialogVisibleStartUsing: false,
      state: '',
      dialogVisible: false,
      enable: true,
      currentPage1: 1,
      currentPageRecord: 1,
      pageSizeRecord: 4,
      pageSize: 10,
      totalNum: 0,
      dataList: [],
      id: '',
      brandNum: '',
      timeNum: '',
      ruleForm: {
        apiV3Key: '',
        appid: '',
        mchId: '',
        name: '',
        privateKey: '',
        serial: '',
        simpleName: '',
        status: '',
        mchKey: '',
        privateCert: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入商户号名称', trigger: 'blur' }
        ],
        simpleName: [
          { required: true, message: '请输入简写', trigger: 'change' }
        ],
        mchId: [
          { required: true, message: '商户号绑定', trigger: 'change' }
        ],
        appid: [
          { required: true, message: '请输入AppId', trigger: 'change' }
        ],
        privateKey: [
          { required: true, message: '请输入商户私钥', trigger: 'change' }
        ],
        privateCert: [
          { required: true, message: '请输入商户证书', trigger: 'change' }
        ],
        mchKey: [
          { required: true, message: '请输入商户密钥', trigger: 'change' }
        ],
        serial: [
          { required: true, message: '请输入商户证书序列号', trigger: 'change' }
        ],
        apiV3Key: [
          { required: true, message: '请输入ApiV3Key', trigger: 'change' }
        ],
        status: [
          { required: false, trigger: 'change' }
        ]
      },
      forbiddenState: 0,
      recordDataList: [],
      recordTotalNum: 0,
      dictionaries: { // 字典数据
        enable_status: []
      },
      startUsingId: '',
      parArray: [],
      limits: ''

    }
  },
  created () {
    for (const type in this.dictionaries) { this.getDictionaries(type) }
    this.getDateList()
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'merchantNoCode'// 菜单管理里面的菜单编码
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    console.log(this.parArray)
    // this.getRecordList()
  },
  methods: {
    // 获取字典数据
    getDictionaries (type) {
      console.log(type, 'type')
      if (type && this.dictionaries[type].length > 0) { return }
      const params = { groupId: type }
      this.$api.dictionaries(params).then((res) => {
        this.dictionaries[type] = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 操作记录
    operationRecord (e) {
      console.log(e)
      this.axios.post('/pay/payWechatMchRecord/selectList', {
        id: e.id,
        pageNo: this.currentPageRecord,
        pageSize: this.pageSizeRecord
        //  status:this.status,
      }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.recordDataList = res.data.list
          this.recordTotalNum = res.data.totalPage
        }
      })
      this.operationRecordDialog = true
    },
    handleOperationClose () {
      this.operationRecordDialog = false
    },
    handleRecordSizeChange (val) {
      this.currentPageRecord = val
      this.operationRecord()
    },
    handleRecordCurrentChange (val) {
      this.pageSizeRecord = val
      this.operationRecord()
    },

    handleCloseForbidden () {
      this.dialogVisibleForbidden = false
    },
    handlerStartUsing () {
      this.dialogVisibleStartUsing = false
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    handleCurrentChange (val) {
      console.log(val, '1')
      this.currentPage1 = val
      this.getDateList()
    },
    handleSizeChange (val) {
      console.log(val, '2')
      this.pageSize = val
      this.getDateList()
    },
    addCommercial (e) {
      this.addtitle = '新增商户号'
      this.ruleForm.apiV3Key = ''
      this.ruleForm.appid = ''
      this.ruleForm.mchId = ''
      this.ruleForm.name = ''
      this.ruleForm.privateKey = ''
      this.ruleForm.privateCert = ''
      this.ruleForm.mchKey = ''
      this.ruleForm.serial = ''
      this.ruleForm.simpleName = ''
      this.ruleForm.status = ''
      this.state = e
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    //   提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.state == 1) {
            this.axios.post('/pay/wechatMch/add', {
              apiV3Key: this.ruleForm.apiV3Key,
              appid: this.ruleForm.appid,
              mchId: this.ruleForm.mchId,
              name: this.ruleForm.name,
              privateKey: this.ruleForm.privateKey,
              privateCert: this.ruleForm.privateCert,
              serial: this.ruleForm.serial,
              simpleName: this.ruleForm.simpleName,
              status: this.ruleForm.status,
              mchKey: this.ruleForm.mchKey

            }).then(res => {
              if (res.code == 0) {
                console.log(res)
                this.getDateList()
                this.dialogVisible = false
                this.$message.success('新增成功')
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            this.axios.post('/pay/wechatMch/update', {
              apiV3Key: this.ruleForm.apiV3Key,
              appid: this.ruleForm.appid,
              mchId: this.ruleForm.mchId,
              name: this.ruleForm.name,
              privateKey: this.ruleForm.privateKey,
              privateCert: this.ruleForm.privateCert,
              mchKey: this.ruleForm.mchKey,
              serial: this.ruleForm.serial,
              simpleName: this.ruleForm.simpleName,
              status: this.ruleForm.status,
              id: this.id
            }).then(res => {
              console.log(res)
              this.getDateList()
              this.dialogVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose (done) {
      done()
    },
    //   查询分页
    getDateList () {
      this.axios.post('/pay/wechatMch/selectList', {
        pageNo: this.currentPage1,
        pageSize: this.pageSize
        //  status:this.status,
      }).then(res => {
        console.log(res)
        if (res.code == 0) {
          this.dataList = res.data.list
          this.totalNum = res.data.totalNum
        }
      })
    },
    //  编辑
    handleClick (row, e) {
      this.addtitle = '编辑'
      console.log(row)
      this.state = e
      this.id = row.id
      if (this.state == 2) {
        this.dialogVisible = true
        this.ruleForm.apiV3Key = row.apiV3Key
        this.ruleForm.appid = row.appid
        this.ruleForm.mchId = row.mchId
        this.ruleForm.name = row.name
        this.ruleForm.privateKey = row.privateKey
        this.ruleForm.privateCert = row.privateCert
        this.ruleForm.mchKey = row.mchKey
        this.ruleForm.serial = row.serial
        this.ruleForm.simpleName = row.simpleName
        this.ruleForm.status = row.status
      }
    },

    forbiddenBtn () {
      this.axios.post(`/pay/wechatMch/disable?id=${this.forbiddenId}&confirmDelete=${this.forbiddenState}`).then(res => {
        if (res.code == 0) {
          this.currentPage1 = 1
          this.getDateList()
          this.$message.success('禁用成功')
          this.dialogVisibleForbidden = false
        } else {
          this.$message.warning(res.message)
          this.forbiddenState = 1
          this.dialogVisibleForbidden = false
        }
        console.log(res)
      })
    },
    // 启用确定
    startUsingBtn () {
      this.axios.post(`/pay/wechatMch/enable?id=${this.startUsingId}`).then(res => {
        if (res.code == 0) {
          this.$message.success('启用成功')
          console.log(res)
          this.currentPage1 = 1
          this.getDateList()
          this.dialogVisibleStartUsing = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //  启用
    startUsing (row) {
      this.brandNum = row.brandCount
      this.timeNum = row.scheduleCount
      console.log(row.status, '状态')
      if (row.status == 1) {
        this.dialogVisibleForbidden = true
        console.log(this.forbiddenState)
        this.forbiddenId = row.id
      } else {
        this.startUsingId = row.id
        this.dialogVisibleStartUsing = true
      }
    }

  }
}
</script>

<style scoped lang="scss">
.dialogText{
   padding: 0px 55px;
}
 .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    position: relative;
    width: 100%;
    height: 100%;
  }
 .page {
    // margin: 20px 0;
    padding-right: 20px;
    text-align: right;
    width: 98%;
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: #f4f4f4;
    span {
        font-size: 15px;
        color: #666;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }

    .el-pagination {
        display: inline-block;
        vertical-align: middle;
    }

    /deep/.el-input--suffix .el-input__inner {
        background: #fff;
        color: #000;
        width: 104px;
        box-shadow: none;
    }
}
.btnBox{
  display: flex;
  justify-content: right;
}
/deep/.el-dialog{
    border-radius: 10px;
}
.table /deep/.el-table .el-table__row .cell{
  overflow: auto;
  height: 50px;
}
.active{
    color: #29B271;
}
.forbid{
    color:#F33F3F
}
.table {
    margin: 10px 0 0px;
    overflow-x: scroll;

}

</style>
